import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'

import moment from 'moment'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const dateFormat = 'YYYY-MM-DD';
const view= "view"
const edit="edit"
export default Form.create({wrappedComponentRef: true})(class EditAgencyagreement extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,
            disabled: true,
            type: "1",
            feemethod:"1",
        };

    }



    handleResetFields = () => {
        this.props.form.resetFields();
        this.setState({type:"1"});
        this.props.dispatch({
            type: 'customerManage/setAgencyagreement',
            payload: {
                agencyagreement: "",
            }
        });
    }


    handleCancel = () => {
        this.setState({open:false});
        this.handleResetFields();
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})

    }


    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) {
                return;
            }
            if(values.feemethod =="1" && values.percentfee > 100){
                message.error("按货值百分比收费时不能超过100%");
                return;
            }
            let functionname = "";
            if (this.state.type == "add") {
                functionname = "addAgencyagreement";

            } else if (this.state.type == "edit") {
                functionname = "updateAgencyagreement";
            }else {
                return;
            }

            let form = {};

            if(values.feemethod === "2"){
                form.orderfee = values.percentfee;
            }else{
                form.agencyfee = values.percentfee;
            }

            form.id = R.isNil(this.props.dataSource) ? "" : this.props.dataSource.id,
            form.cstid = this.props.cstid;
            form.signdate = values.signdate.format(dateFormat);
            form.feemethod = values.feemethod;
            form.cstnote = values.cstnote;
            form.agencyno = values.agencyno;

            this.props.dispatch({
                type: 'customerManage/' + functionname,
                payload: {
                    ...form
                }
            });

            this.handleCancel();
        })
    };


    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 9 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };

        const formItemLayout2 = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 }
        };

        let footer=[];

            if(!(this.props.disabled || this.state.type == view)){
                footer.push(<Button size="large" onClick={this.handleConfirm.bind(this, true)}>保存</Button>);
                footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);

            }else{footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);}


        return (

            <Modal visible={this.state.open} title="添加客户代理协议" width={800} wrapClassName="vertical-center-modal" onCancel={this.handleCancel} footer={footer} >

                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="收费方式"
                                hasFeedback
                            >
                                {getFieldDecorator('feemethod', {
                                    rules: [{
                                        required: true, message: '请选择收费方式',
                                    }],
                                    initialValue: dataSource.feemethod
                                })(
                                    <Select disabled={this.props.disabled || this.state.type == view}>
                                        <Option value="1">按货值百分比</Option>
                                        <Option value="2">按单收费</Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>

                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="代理费收费标准"
                                hasFeedback
                            >
                                {getFieldDecorator('percentfee', {
                                    rules: [{
                                        required: true, message: '请输入代理费收费标准',
                                    }],
                                    initialValue: dataSource.feemethod === "1" ? dataSource.agencyfee : dataSource.orderfee

                                })(
                                    <InputNumber maxLength="18"
                                        placeholder={this.props.form.getFieldValue("feemethod") === "1" ? "货值的百分比(%)" : "按单收费"}
                                        style={{width: '100%'}}
                                        disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="签约日期"
                                hasFeedback
                            >
                                {getFieldDecorator('signdate', {
                                    rules: [{
                                        required: true, message: '请输入签约日期！',
                                    }],
                                    initialValue: dataSource.signdate== undefined ? '' : moment(dataSource.signdate, dateFormat)
                                })(
                                    <DatePicker disabled={this.props.disabled || this.state.type == view} style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="协议号"
                                hasFeedback
                            >
                                {getFieldDecorator('agencyno', {

                                    rules: [{
                                        required: false, message: '请填写协议号！',
                                    }],
                                    initialValue: dataSource.agencyno
                                })(
                                    <Input  disabled={dataSource.agencyno ? true : false} placeholder="可自主输入,不填则系统默认生成" maxLength="50"/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={22}>
                            <FormItem
                                {...formItemLayout2}
                                label="客户注意事项"
                                hasFeedback
                            >
                                {getFieldDecorator('cstnote', {
                                    initialValue: dataSource.cstnote
                                })(
                                    <Input.TextArea rows={4}  disabled={this.props.disabled || this.state.type == view} maxLength="300"/>
                                )}
                            </FormItem>
                        </Col>

                    </Row>
                </Form>
            </Modal>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/customer/components/EditAgencyagreement.js
